<template>
  <div class="app">
    <a-breadcrumb style="margin-bottom: 10px">
      <a-breadcrumb-item>督查督办</a-breadcrumb-item>
      <a-breadcrumb-item>查看</a-breadcrumb-item>
    </a-breadcrumb>
    <a-row>
      <a-form-model
        :model="form"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        layout="layout"
        labelAlign="right"
      >
        <a-card title="上报对象信息" class="mb20">
          <a-form-model-item label="上报人姓名" prop="reporterName">
            <a-input v-model="form.reporterName" />
          </a-form-model-item>
          <a-form-model-item label="上报人电话" prop="reporterPhone">
            <a-input v-model="form.reporterPhone" />
          </a-form-model-item>
          <a-form-model-item label="上报时间" prop="reportTime">
            <a-date-picker v-model="form.reportTime" />
          </a-form-model-item>
          <a-form-model-item label="接受公开信息" prop="isPublic">
            <a-radio-group v-model="form.isPublic">
              <a-radio value="true"> 接受 </a-radio>
              <a-radio value="false"> 不接受 </a-radio>
            </a-radio-group>
          </a-form-model-item>
        </a-card>
        <a-card title="巡查对象信息" class="mb20">
          <a-form-model-item label="关联对象" prop="relatedObjectId">
            <a-select v-model="form.relatedObjectId" placeholder="请选择">
              <a-select-option
                :value="item.value"
                v-for="item in inspectTypeList"
              >
                {{ item.label }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="巡查类型" prop="inspectionType">
            <a-select v-model="form.inspectionType" placeholder="请选择">
              <a-select-option
                :value="item.value"
                v-for="item in inspectTypeList"
              >
                {{ item.label }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="关联路段" prop="address">
            <a-row>
              <a-col :span="8">
                <a-select v-model="form.inspectionType" placeholder="请选择">
                  <a-select-option
                    :value="item.value"
                    v-for="item in inspectTypeList"
                  >
                    {{ item.label }}
                  </a-select-option>
                </a-select>
              </a-col>
              <a-col :span="8">
                <a-select v-model="form.inspectionType" placeholder="请选择">
                  <a-select-option
                    :value="item.value"
                    v-for="item in inspectTypeList"
                  >
                    {{ item.label }}
                  </a-select-option>
                </a-select>
              </a-col>
              <a-col :span="8">
                <a-select v-model="form.inspectionType" placeholder="请选择">
                  <a-select-option
                    :value="item.value"
                    v-for="item in inspectTypeList"
                  >
                    {{ item.label }}
                  </a-select-option>
                </a-select>
              </a-col>
            </a-row>
          </a-form-model-item>
          <a-form-model-item label="事发网格" prop="heritageZoneId">
            <a-input v-model="form.heritageZoneId" />
          </a-form-model-item>
          <a-form-model-item label="责任网格" prop="responsibilityGrid">
            <a-input v-model="form.responsibilityGrid" />
          </a-form-model-item>
          <a-form-model-item label="计时区域" prop="timingArea">
            <a-input v-model="form.timingArea" />
          </a-form-model-item>
        </a-card>
        <a-card class="mb20">
          <div slot="title">
            <div class="flex">
              <div class="mr20">上报问题信息</div>
              <div class="flex">
                <div class="mr5 greenDot"></div>
                <div>{{ getName(form.eventStatus, eventStatusList) }}</div>
              </div>
            </div>
          </div>
          <a-descriptions :column="1">
            <a-descriptions-item label="问题来源">
              {{ getName(form.issueInfo.issueSource, sourceList) }}
            </a-descriptions-item>
            <a-descriptions-item label="问题类型">
              {{ getName(form.issueInfo.issueType, questionTypeList) }}
            </a-descriptions-item>
            <a-descriptions-item label="问题等级">
              {{ getName(form.issueInfo.issueLevel, questionLevelList) }}
            </a-descriptions-item>
            <a-descriptions-item label="紧急程度">
              {{ getName(form.issueInfo.urgencyLevel, urgentList) }}
            </a-descriptions-item>
            <a-descriptions-item label="截止时间">
              {{ form.issueInfo.deadlineTime }}
            </a-descriptions-item>
            <a-descriptions-item label="上传材料">
              <span
                class="blue pointer"
                @click="preview(form.issueInfo.materialLink)"
                >点击预览 {{ form.issueInfo.materialLink }}</span
              >
            </a-descriptions-item>
            <a-descriptions-item label="问题描述">
              {{ form.issueInfo.issueDescription }}
            </a-descriptions-item>
            <a-descriptions-item label="立案条件">
              {{ form.issueInfo.closeCondition }}
            </a-descriptions-item>
          </a-descriptions>
        </a-card>
        <a-card title="案件进度信息" class="mb20">
          <a-steps :current="form.status">
            <a-step title="暂存"> </a-step>
            <a-step title="上报" />
            <a-step title="直接办结" />
          </a-steps>
        </a-card>
        <a-card title="案件派遣信息" class="mb20">
          <a-descriptions :column="1">
            <a-descriptions-item label="派遣类型">
              Zhou Maomao
            </a-descriptions-item>
            <a-descriptions-item label="派遣部门">
              {{ form.relatedObjectId }}
            </a-descriptions-item>
            <a-descriptions-item label="派遗部门">
              {{ form.relatedObjectId }}
            </a-descriptions-item>
            <a-descriptions-item label="派遣时间">
              {{ form.relatedObjectId }}
            </a-descriptions-item>
            <a-descriptions-item label="派遣说明">
              {{ form.relatedObjectId }}
            </a-descriptions-item>
          </a-descriptions>
        </a-card>
        <a-card title="案件跟踪信息" class="mb20">
          <a-descriptions :column="1">
            <a-descriptions-item label="核实人">
              Zhou Maomao
            </a-descriptions-item>
            <a-descriptions-item label="核实时间">
              {{ form.relatedObjectId }}
            </a-descriptions-item>
            <a-descriptions-item label="上报说明">
              {{ form.relatedObjectId }}
            </a-descriptions-item>
            <a-descriptions-item label="延期时间">
              {{ form.relatedObjectId }}
            </a-descriptions-item>
            <a-descriptions-item label="延期说明">
              {{ form.relatedObjectId }}
            </a-descriptions-item>
            <a-descriptions-item label="延期申请审核人">
              {{ form.relatedObjectId }}
            </a-descriptions-item>
            <a-descriptions-item label="延期申请审核时间">
              {{ form.relatedObjectId }}
            </a-descriptions-item>
          </a-descriptions>
        </a-card>
        <a-card title="案件归档信息" class="mb20">
          <a-descriptions :column="1">
            <a-descriptions-item label="结案时间">
              Zhou Maomao
            </a-descriptions-item>
            <a-descriptions-item label="结案资料">
              {{ form.relatedObjectId }}
            </a-descriptions-item>
            <a-descriptions-item label="结案说明">
              {{ form.relatedObjectId }}
            </a-descriptions-item>
          </a-descriptions>
        </a-card>
      </a-form-model>

      <div class="justify_center">
        <a-button type="primary" class="mr20" @click="handleSubmit"
          >提交</a-button
        >
        <a-button @click="$router.go(-1)">返回</a-button>
      </div>
    </a-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      labelCol: { span: 2 },
      wrapperCol: { span: 14 },
      menuList: [
        { label: "全部", value: null },
        { label: "遗产保护", value: "HERITAGE_PROTECTION" },
        { label: "经营准入", value: "OPERATION_ACCESS" },
        { label: "保护建设", value: "CONSERVATION_DEVELOPMENT" },
        { label: "执法检查", value: "LAW_ENFORCEMENT_INSPECTION" },
        { label: "数据维护", value: "DATA_MAINTENANCE" },
      ],
      sourceList: [],
      questionTypeList: [],
      inspectTypeList: [],
      questionLevelList: [],
      urgentList: [
        {
          dictValue: "GENERAL",
          dictLabel: "一般",
        },
        {
          dictValue: "URGENT",
          dictLabel: "紧急",
        },
      ],
      moveList: [
        { label: "专项行动", value: 0 },
        { label: "联合行动", value: 1 },
      ],
      statusList: [
        {
          value: "0",
          label: "无状态",
        },
        {
          value: "1",
          label: "已上报",
        },
        {
          value: "2",
          label: "已转交",
        },
        {
          value: "3",
          label: "处理中",
        },
        {
          value: "4",
          label: "不处理",
        },
        {
          value: "5",
          label: "已处理",
        },
      ],
      loading: true,
      dialogVisible: false,
      id: null,
      eventId: null,
      form: {},
      eventStatusList: [
        { dictLabel: "暂存", dictValue: "1" },
        { dictLabel: "待核实", dictValue: "2" },
        { dictLabel: "待处理", dictValue: "3" },
        { dictLabel: "已受理", dictValue: "4" },
        { dictLabel: "已驳回", dictValue: "5" },
        { dictLabel: "待派遣", dictValue: "6" },
        { dictLabel: "已派遣", dictValue: "7" },
      ],
    };
  },
  mounted() {
    console.log(this.$route.query, "this.$route.query");
    this.eventId = this.$route.query.eventId;
    this.init();
  },
  methods: {
    handleSubmit() {
      const url = `/government-platform-center/xunjian/patrolInspection/edit`;
      this.$axios.post(url, this.form).then((res) => {
        console.log(res);
        getDetail();
      });
    },
    async init() {
      await this.getDict1();
      await this.getDict2();
      await this.getDict3();
      await this.getDict4();
      await this.getDetail();
    },
    getDetail() {
      this.loading = true;
      const url = `/government-platform-center/xunjian/patrolInspection/detail?eventId=${this.eventId}`;
      this.$axios.get(url).then((res) => {
        if (res.data.code == 0) {
          this.form = res.data.data;
          console.log(
            this.form,
            "this.formthis.formthis.formthis.formthis.formthis.formthis.form"
          );
          this.loading = false;
        }
      });
    },
    preview(url) {
      window.open(url, "blank");
    },
    getBack() {},
    //字典
    //问题来源
    async getDict1() {
      this.loading = true;
      const url =
        "government-platform-center/dictData/queryByCode?dictType=QUESTION_SOURCE_CODE";
      const res = await this.$axios.get(url);
      if (res.data.code == 0) {
        this.sourceList = res.data.data;
      }
    },
    //问题类型
    async getDict2() {
      this.loading = true;
      const url =
        "government-platform-center/dictData/queryByCode?dictType=QUESTION_TYPE_CODE";
      const res = await this.$axios.get(url);
      if (res.data.code == 0) {
        this.questionTypeList = res.data.data;
      }
    },
    //巡查类型
    async getDict3() {
      this.loading = true;
      const url =
        "government-platform-center/dictData/queryByCode?dictType=INSPECTION_TYPE_CODE";
      const res = await this.$axios.get(url);
      if (res.data.code == 0) {
        this.inspectTypeList = res.data.data;
      }
    },
    //问题等级
    async getDict4() {
      this.loading = true;
      const url =
        "government-platform-center/dictData/queryByCode?dictType=QUESTION_LEVE_CODE";
      const res = await this.$axios.get(url);
      if (res.data.code == 0) {
        this.questionLevelList = res.data.data;
      }
    },
    getName(id, list) {
      let name = "未知";
      list.forEach((item) => {
        if (id == item.dictValue) {
          name = item.dictLabel;
        }
      });
      return name;
    },
  },
};
</script>
<style scoped>
.ant-row {
  border-radius: 5px;
  margin-bottom: 15px;
  background: #fff;
  color: #000;
}

/deep/ .ant-table-thead > tr > th {
  color: #000;
  font-weight: bold;
}

/deep/ .ant-table-tbody > tr > td {
  color: #000;
}

.ant-col {
  margin: 10px 0;
}

.ant-select {
  width: 60%;
}

.ant-input {
  width: 60%;
}

.greenDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: green;
  margin-top: 8px;
}
</style>
